import { useEffect, useState } from 'react';
import { Spin } from 'antd';
import utils from '../../assest/utils';
import API from '../../api/index';
import nameMap from './nameMap';
import color from './color';
const ECHARTS_URL = 'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js';
const UK_MAP_URL = '/westminster_uk.js';

function InteractiveMap() {
  const [spinning, setSpinning] = useState(false);

  const getEcharts = () => {
    return utils.requireJS(ECHARTS_URL);
  };
  const getUKMap = () => {
    return utils.requireJS(UK_MAP_URL);
  };
  const initMap = async () => {
    const res = await API.getWholeCovidStatus();
    var myChart = window.echarts.init(document.getElementById('echart'));
    var option = {
      layoutCenter: ['50%', '50%'],
      layoutSize: 750,
      "series_id": 4242979,
      rotateSensitivity: 0,
      "backgroundColor": "#c5d6e7",
      "title": [
        {
          "textStyle": {
            "color": "#000",
            "fontSize": 18
          },
          // "text": "Results of the 2017 General Election",
          "top": "auto",
          "subtextStyle": {
            "color": "#aaa",
            "fontSize": 12
          },
          "left": "auto"
        }
      ],
      "color": color,
      "series": [
        {
          "itemStyle": {
            "emphasis": {
              "borderColor": "black"
            },
            "normal": {
              "borderColor": "white"
            }
          },
          "symbol": "circle",
          "data": res,
          "showLegendSymbol": false,
          "name": "",
          "tooltip": {
            "formatter": "{b}"
          },
          "label": {
            "emphasis": {
              "show": false
            }
          },
          "mapType": "UK_electoral_2016",
          "nameMap": nameMap,
          "roam": true,
          "type": "map"
        }
      ],
      "toolbox": {
        "feature": {
          "restore": {
            "show": true
          },
          "dataView": {
            "show": true
          },
          "saveAsImage": {
            "title": "\u4e0b\u8f7d\u56fe\u7247",
            "show": true
          }
        },
        "top": "center",
        "left": "95%",
        "orient": "vertical",
        "show": true
      },
      "legend": [
        {
          "textStyle": {
            "color": "#333",
            "fontSize": 12
          },
          "show": true,
          "top": "top",
          "data": [
            ""
          ],
          "orient": "horizontal",
          "selectedMode": "multiple",
          "left": "center"
        }
      ],
      "tooltip": {
        "borderColor": "black",
        "axisPointer": {
          "type": "line"
        },
        "textStyle": {
          "color": "#000000",
          "fontSize": 14
        },
        "trigger": "item",
        "borderWidth": 1,
        "backgroundColor": "white",
        "formatter": null,
        "triggerOn": "mousemove|click"
      },
      "visualMap": {
        "text": [
          "Legend"
        ],
        "splitNumber": 5,
        "calculable": true,
        "orient": "vertical",
        "textStyle": {
          "color": [
            "black"
          ]
        },
        "min": 0,
        "top": "bottom",
        "showLabel": true,
        "max": 150,
        "inRange": {
          "color": [
            "green",
            "yellow",
            "red"
          ]
        },
        "type": "piecewise",
        "dimension": null,
        "left": "left"
      }
    };
    myChart.setOption(option);
    return myChart;
  };
  useEffect(async () => {
    setSpinning(true);
    await getEcharts();
    await getUKMap();
    await initMap();
    setSpinning(false);
  }, []);
  return (
    <>
      <Spin tip="Loading..." spinning={spinning}>
        <div id="echart"></div>
      </Spin>
    </>
  );
};

export default InteractiveMap;